<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
        云客客户关系管理系统
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/static/css/x-admin.css" media="all">
    <link rel="stylesheet" href="/static/laypage/laypage.css">
    <link rel="stylesheet" href="/static/lib/bootstrap/css/bootstrap.min.css">
    <style>
        #nav{
            width:110px;
            line-height:39px;
            height: 39px;
            position: relative;
            left: 150px;
            top: -40px;
            background-color:#199F93;
            color: white;
        }
        #nav #li{
            width: 110px;
            position: relative;
            left: -24px;
            top: -10px;
        }
    </style>
</head>
<body>
<div class="x-nav">
            <span class="layui-breadcrumb">
              <a><cite>首页</cite></a>
              <a><cite>员工管理</cite></a>
              <a><cite>员工列表</cite></a>
            </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"  href="javascript:location.replace(location.href);" title="刷新"><i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
    <div class="layui-form x-center" action="" style="width:1200px">
        <div class="layui-form-pane" style="margin-top: 15px;">
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 120px">入职日期范围</label>
                <div class="layui-input-inline">
                    <input class="layui-input" id="startDate" placeholder="开始日">
                </div>
                <div class="layui-input-inline">
                    <input class="layui-input" placeholder="截止日" id="endDate">
                </div>
                <label class="layui-form-label" style="width: 90px">查询条件</label>
                <div class="layui-input-inline">
                    <select class="layui-input" name="interest" id="select" lay-filter="aihao" style="display: block;width: 110px;height: 39px;margin-left: 15px">
                        <option value="0">全部</option>
                        <option value="staffSex">性别</option>
                        <option value="staffName">员工名</option>
                        <option value="deptName">部门名</option>
                        <option value="staffTel">手机号</option>
                        <option value="staffState">员工状态</option>
                        <option value="jobName">职务名称</option>
                    </select>
                </div>
                <div class="layui-input-inline">
                    <input type="text" name="condition" id="condition" placeholder="请输入查询条件" class="layui-input" style="margin-left: -60px">
                </div>
                <div class="layui-input-inline" style="width:80px">
                    <button class="layui-btn"  id="search" lay-filter="sreach" style="margin-left: -120px"><i class="layui-icon">&#xe615;</i></button>
                </div>
            </div>
        </div>
    </div>
    <xblock>
        <button class="layui-btn" id="addStaffBtn" style="margin-top: 30px"><i class="layui-icon">&#xe608;</i>添加员工</button>
            <ul class="layui-nav" id="nav">
                <li class="layui-nav-item" id="li">
                    <a href="javascript:;">更多操作</a>
                    <dl class="layui-nav-child">
                        <dd><a href="#">导出EXECL</a></dd>
                        <dd><a href="#" onclick="delAll()">批量删除</a></dd>
                        <dd><a href="#">批量发短信</a></dd>
                        <dd><a href="#">批量发邮件</a></dd>
                    </dl>
                </li>
            </ul>
        <span class="x-right" style="line-height:40px">共有数据：88 条</span></xblock>
                        <table  class="layui-table" id="app">
                            <thead>
                            <tr>
                                <th>
                                    <input type="checkbox" onclick="checkAll(this,'subBox')" id="checkAll" value="">全选
                                </th>
                                <th>员工编号</th>
                                <th>员工名称</th>
                                <th>部门名称</th>
                                <th>工作电话</th>
                                <th>手机号码</th>
                                <th>入职日期</th>
                                <th>员工状态</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="gradeX"   v-for="staff in result">
                                <th class="tr1">
                                    <input type="checkbox" name="subBox" class="tr1"  lay-skin="primary"/>
                                </th>
                                <td class="tr2">{{staff.id }}</td>
                                <td>{{staff.name }}</td>
                                <td>{{staff.deptName }}</td>
                                <td>{{staff.pho }}</td>
                                <td>{{staff.tel}}</td>
                                <td>{{staff.hireDate|time}}</td>
                                <td>{{staff.state }}</td>
                                <td class="td-manage">
                                    <a  href="#" @click="editEvent(staff.id)" class="ml-5" style="text-decoration:none"><i class="layui-icon">&#xe642;</i></a>
                                    <a  href="#" @click="delStaff(staff.id)" class="ml-5" style="text-decoration:none"><i class="layui-icon">&#xe640;</i></a>
                                    <a  href="#" @click="staffIntroduce(staff.id)" class="ml-5" style="text-decoration:none"><i class="layui-icon">&#xe60e;</i></a>
                                </td>
                            </tr>
                            </tbody>
                        </table>
    <div id="page"></div>
</div>
</body>
<script src="/static/lib/layui/layui.js" charset="utf-8"></script>
<script src="/static/js/x-layui.js" charset="utf-8"></script>
<script src="/static/js/vue/vue.min.js" charset="UTF-8"></script>
<script src="/static/js/jquery.min.js" charset="UTF-8"></script>
<script src="/static/laypage/laypage.js" charset="UTF-8"></script>
<script src="/static/lib/bootstrap/js/bootstrap.min.js" charset="UTF-8"></script>
<script>
    layui.use(['laydate','element','laypage','layer'], function(){
        $ = layui.jquery;//jquery
        laydate = layui.laydate;//日期插件
        lement = layui.element();//面包导航
        laypage = layui.laypage;//分页
        layer = layui.layer;//弹出层

        //以上模块根据需要引入

        var start = {
            min: '1900-01-01 00:00:00' //最小日期
            ,max: '2099-06-16 23:59:59'
            ,istoday: false
            ,choose: function(datas){
                end.min = datas; //开始日选好后，重置结束日的最小日期
                end.start = datas //将结束日的初始值设定为开始日
            }
        };

        var end = {
            min:'1900-01-01 00:00:00' //最小日期
            ,max: '2099-06-16 23:59:59'
            ,istoday: false
            ,choose: function(datas){
                start.max = datas; //结束日选好后，重置开始日的最大日期
            }
        };

        document.getElementById('startDate').onclick = function(){
            start.elem = this;
            laydate(start);
        }
        document.getElementById('endDate').onclick = function(){
            end.elem = this
            laydate(end);
        }
    });
    var app = new Vue({
        el: "#app",
        data: {
            result: []
        }
    })
    var getAllStaff = function (curr) {
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "/staff/staffList",
            data: {
                currPage: curr || 1,
                pageSize: 10,
                startDate:$("#startDate").val(),
                endDate:$("#endDate").val(),
                select:$("#select").val(),
                condition:$("#condition").val()
            },
            success: function (msg) {
                app.result = msg.data.result;
                laypage({
                    cont: 'page',
                    pages: msg.data.totalPage,
                    groups: 5,
                    first: 1,
                    last: msg.data.totalPage,
                    skip: true,
                    skin: '#199F93',
                    curr: curr || 1,
                    jump: function (obj, first) {
                        if (!first) {
                            getAllStaff(obj.curr);
                        }
                    },
                    prev: '<em><</em>',
                    next: '<em>></em>',
                });
            }
        });
    }
    $("#search").click(function () {
        getAllStaff();
    })
    getAllStaff();
    $("#addStaffBtn").on("click", function () {
        layer.open({
            type: 2,
            title: "添加员工",
            fix: false,
            maxmin: true,
            shadeClose: true,
            area: ['1100px', '600px'],
            content: '/staff/getInfo',
            end: function () {
                getAllStaff();
            }
        });
    })
    function editEvent(id) {
        layer.open({
            type: 2,
            title: "编辑员工",
            fix: false,
            maxmin: true,
            shadeClose: true,
            area: ["1100px", "600px"],
            content: "/staff/getStaff?id=" + id,
            end: function () {
                getAllStaff();
            }
        });
    }
    function staffIntroduce(id) {
        layer.open({
            type: 2,
            title: "员工详情",
            fix: false,
            maxmin: true,
            shadeClose: true,
            area: ["1100px", "600px"],
            content: "/staff/staffIntroduce?id=" + id,
            end: function () {
                getAllStaff();
            }
        });
    }
    function delStaff(id) {
        layer.confirm('您确定要删除么？', {
            btn : [ '是', '否' ]
        }, function() {
            $.ajax({
                type : "POST",
                dataType : "json",
                url : "/staff/delStaff",
                data:{
                    id:id
                },
                success : function(msg) {
                    getAllStaff();
                    if(msg.data==1){
                        layer.msg('已经成功删除记录' + id,{icon:5});
                    }else {
                        layer.msg('删除记录失败' + id,{icon:5});
                    }

                }
            });

        }, function() {
            //否
        });
    }
    Vue.filter('time', function (value) {//value为13位的时间戳
        function add0(m) {
            return m < 10 ? '0' + m : m
        }
        var time = new Date(parseInt(value));
        var y = time.getFullYear();
        var m = time.getMonth() + 1;
        var d = time.getDate();

        return y + '-' + add0(m) + '-' + add0(d);
    });

    //批量删除提交
    function delAll() {
        var obj=document.getElementsByName("subBox");
        var s="";
        for (var i=0;i<obj.length;i++){
            if(obj[i].checked) s+=obj[i].parentNode.nextSibling.nextSibling.innerHTML+",";
        }
        alert(s);
        layer.confirm('您确定要删除么？', {
            btn : [ '是', '否' ]
        }, function() {
            $.ajax({
                type : "POST",
                dataType : "json",
                url : "/staff/delAllStaff",
                data:{
                    staffId:s
                },
                success : function(msg) {
                    getAllStaff();
                    document.getElementById("checkAll").checked=false;
                    var choose=document.getElementsByName("subBox");
                    for (var i=0;i<choose;i++){
                        choose[i].checked=false;
                    }
                    if(msg.data==1){
                        layer.msg('已经成功删除记录',{icon:5});
                    }else{
                        layer.msg('删除记录失败');
                    }

                }
            });

        }, function() {
            //否
        });
    }
    function checkAll(obj, cName) {
        var checkboxs = document.getElementsByName(cName);
        for ( var i = 0; i < checkboxs.length; i+=1) {
            checkboxs[i].checked = obj.checked;
        }
    }
</script>
</html>